<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>xiaomi</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.topBar{
				height: 40px;
				background-color: #333;
			}
			.container1{
				width: 1266px;
				height: 40px;
/*				background-color: yellow;
*/				margin: 0 auto;
			}
			.topBar-nav{
				width: 375px;
				height: 40px;
				background-color:red;
				float: left;
			}
			.topBar-user-info{
				height: 40px;
				width: 140px;
				float: right;
				background-color:coral ;
				margin-left: 15px;
			}
			.topBar-cart{
				width: 120px;
				height:40px;
				float: right;
				background-color:green ;

			}
			.header{
				width: 100%;
				height: 110px;
			}
			.logo{
				float:left;
				width: 62px;
				height: 55px;
				background-color: crimson;
				margin-top: 22px;
			}
			.container2{
				width: 1266px;
				height: 110px;
/*				background-color: yellow;
*/				margin: 0 auto;
			}
			.nav{
				float:left;
				width: 780px;
				height: 110px;
				background-color: yellow;
			}
			.search{
				float:right;
				width: 296px;
				height: 50px;
				background-color: purple;
				margin-top: 25px;
			}
			.content{
				width: 1266px;
				height: 460px;
				margin: 0 auto 14px;
			}
			.content-list{
				width: 234px;
				height: 460px;
				background-color:  darkkhaki;
				float: left;
			}
			.lunbo{
				width: 992px;
				height: 460px;
				background-color:  darkmagenta;
				float: left;
			}
			.shop{
				height: 170px;
				width: 1266px;
				margin: 0 auto;
			}
			.channel{
				width: 234px;
				height: 170px;
				float: left;
				background-color:darkgoldenrod ;
			}
			.advertising{
				width: 992px;
				height: 170px;
				float: left;
				
			}
			.advertising ul{
				list-style: none;
			}
			
			.advertising ul li{
				float: right;
				margin-left: 14px;
				width: 316px;
				height: 170px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="topBar">
			<div class="container1">
				<div class="topBar-nav">导航条</div>
				<div class="topBar-cart">购物车</div>
				<div class="topBar-user-info">用户登录</div>
				
			</div>
		</div>
		<div class="header">
			<div class="container2">
				<div class="logo">logo</div>
				<div class="nav">导航</div>
				<div class="search">搜索框</div>
			</div>
		</div>
		
		<div class="content">
			<div class="content-list"></div>
			<div class="lunbo"></div>
		</div>
		<div class="shop">
			<div class="channel"></div>
			<div class="advertising">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>

				</ul>
			</div>
		</div>
	</body>
</html>
